window.addEventListener("load", function () {
  var focus_l = this.document.querySelector(".focus_l");
  var focus_r = this.document.querySelector(".focus_r");
  var bigBox = this.document.querySelector(".big_box");
  bigBox.addEventListener("mouseenter", function () {
    focus_l.style.display = "block";
    focus_r.style.display = "block";
  });
  bigBox.addEventListener("mouseleave", function () {
    focus_l.style.display = "none";
    focus_r.style.display = "none";
  })

  //动态的生成小圆圈；
  var ol = document.querySelector("ol");

  var focus = document.querySelector(".focus");
  var ul = document.querySelector("ul");
  console.log(ul.children.length);

  var li = document.querySelectorAll("li");
  console.log(ul.children.length);
  for (var i = 0; i < ul.children.length; i++) {



    var li = document.createElement("li");
    //创建小圆圈的索引号
    li.setAttribute("index", i)
    ol.appendChild(li);
    //点击里面的小圆圈让他动起来
    li.addEventListener("click", function () {
      for (var i = 0; i < ul.children.length; i++) {
        ol.children[i].className = "";
      }
      this.className = "selected";


      //点击小圆圈移动图片，是ul在动，不是li里动，ul移动的距离就是索引号
      //移动的距离索引号乘以图片的宽度；负值往左走；
      //  animate(ul,targrt,callback)
      //记录当前的索引号 在创建li的时候就写入

      //点击小圆圈得到索引号
      var index = this.getAttribute("index")
      var bigBoxWidth = bigBox.offsetWidth;

      //var focusWidth=focus.offsetWidth;
      console.log(bigBoxWidth);
      //console.log(focusWidth);(
      console.log(index);
      animate(ul, -index * bigBoxWidth, function () {
        console.log(-index * bigBoxWidth);
      })
    })
  }

  ol.children[0].className = "selected";
})